<template>
  <div class="">
    <div class="userlogotip">
      <div class="imgsleft">
        <img src="http://placeholder.qiniudn.com/60x60/3cc51f/ffffff"></div>
      <div class="titles">
        <p class="name">Admin</p>
        <p class="emai">30005@qq.com</p>
      </div>
      <span class="rigjt icons iconfont"></span>
    </div>
    <panel   :list="list"  type="3"  class="setup-box"></panel>
    <div class="logoout">安全退出</div>
  </div>
</template>

<script>
import { Panel } from 'vux'

export default {
  components: {
    Panel
  },
  data () {
    return {
     list: [{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '账户安全',
        // desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '分享应用',
        // desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      },{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '帮助中心',
        // desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '关于',
        // desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '设置',
        // desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        }
      }],

    }
  },
    methods: {
    // demo07_onIndexChange (index) {
    //   this.banner_index = index
    // },

  },
  mounted () {
    this.$nextTick(function() {
      // alert("f")
    var _this=this;
   setTimeout(()=>{this.$store.state.isload=false},100)
    // this.$router.push('/home/')

    })
  }
}
</script>
<style lang="scss">
body{
  background-color: #f5f5f5;
}

.logoout {
    width:90%;
    margin:auto;
    height:45px;
    border-radius: 30px;
    line-height: 45px;
    background-color: #FD5353;
    color:#fff;
    font-size: 17px;
    text-align: center;
    margin-top: 20px;
    &:active {
      background-color: #e5e5e5;
      // color:#333;
    }
}
.userlogotip {
 border-bottom: 1px solid #D9D9D9;
 box-shadow: 1px 1px 8px #C1C1C1;
  background-color: #fff;
  padding: 15px;
  display:flex;
  .icons {
    color:#D9D9D9;
    vertical-align: middle;
    line-height: 42px;
    font-size: 12px;
  }
  .imgsleft {
    margin-right: 15px;
      img {
          width: 50px;
          height: 50px;
          border-radius: 100%;
          display:inline-block;
      }
  }
  .titles{
    flex:1;
    .name {
      color:#303030;
    }
    .emai {
      color:#888;
    }
  }
}
.setup-box {
  .weui-cells {
    background-color: #f5f5f5;
  }
  .weui-cell{
    background-color: #fff;
    padding: 13px 15px;
    // margin-top: 90px
  }
  // .weui-cell:first-child {
  //   margin: 20px 0px;
  //   border-bottom: 1px solid #D9D9D9;
  //   // padding: 10px 15px;
  //   // margin-top: 30px;
  //   &:before {
  //     // display: none;
  //     left: 0;
  //   }
  // }
  .weui-cell:nth-child(1) {
    margin-bottom:  6px ;
    border-bottom: 1px solid #D9D9D9;
    // padding: 10px 15px;
    // margin-top: 30px;
    &:before {
      // display: none;
      left: 0;
    }
  }
  .weui-cell:nth-child(2) {
    // margin: 20px 0px;
    // border-bottom: 1px solid #D9D9D9;
    // padding: 10px 15px;
    // margin-top: 30px;
    &:before {
      // display: none;
      left: 0;
    }
  }
  .weui-cell:nth-last-child(2){
    border-bottom: 1px solid #D9D9D9;
    // padding: 10px 15px;
    // margin-top: 30px;
    // &:before {
    //   // display: none;
    //   left: 0;
    // }
  }
  .weui-cell:nth-last-child(1){
    // padding: 10px 15px;
    margin-top: 30px;
    &:before {
      // display: none;
      left: 0;
    }
  }
}
</style>
